<template>
  <div class="box">
    <FormCom
      @formChange="formChange"
      :config="config"
      @submitForm="submit"
      :data="formData"
    ></FormCom>
  </div>
</template>

<script>
// 带验证的表单
import FormCom from "../components/formContainer/index";
export default {
  name: "autoForm",
  components: { FormCom },
  data() {
    return {
      formData: {
        name: "张三",
        xiaoqu: "我家",
        upload: [{ name: "xxx", url: "xxx" }],
      },
      config: {
        okTxt: "新建",
        layout: "vertical",
        item: [
          {
            key: "name",
            type: "input",
            label: "姓名",
            style: { width: "50%" },
            require: true,
          },
          {
            key: "xiaoqu",
            type: "input",
            label: "小区名",
            style: { width: "50%" },
            require: true,
          },
          {
            key: "type",
            type: "select",
            label: "是否毕业",
            style: { width: "50%" },
            options: [
              { value: "1", label: "毕业" },
              { value: "2", label: "未毕业" },
            ],
            clearable: true,
            require: true,
          },
          {
            key: "school",
            type: "input",
            show: false,
            label: "毕业院校",
            style: { width: "50%" },
            require: true,
          },
          {
            key: "company",
            type: "input",
            show: false,
            label: "就业公司",
            style: { width: "50%" },
          },
          {
            key: "cascader",
            type: "cascader",
            label: "选择部门",
            style: { width: "50%" },
            api: "/api/tree",
            apiLabel: "tree",
            require: true,
          },
          {
            key: "penson",
            type: "select",
            label: "联系人",
            api: "/api/data",
            apiLabel: "lifeList",
          },
          {
            key: "radio",
            type: "radio",
            label: "单选框",
            api: "/api/data",
            apiLabel: "lifeList",
          },
          {
            key: "checkbox",
            type: "checkbox",
            label: "多选框",
            api: "/api/data",
            apiLabel: "lifeList",
          },
        ],
      },
    };
  },
  methods: {
    submit(val) {
      console.log(val);
    },
    formChange(val) {
      this.config.item.forEach((e) => {
        if (e.key === "school" || e.key === "company") {
          e.show = val.type === "1";
          if (val.type === "1") this.formData.name = "222";
        }
      });
      this.$set(this.config, "item", [...this.config.item]);
    },
  },
};
</script>

<style></style>
